import React from 'react';
import { MoreVertical, Star, Share2, Download, Eye } from 'lucide-react';
import FileIcon from './FileIcon';
import { Button } from '@/components/ui/button';

const FileList = ({ files, selectedFiles, onFileSelect, onFolderOpen, onPreviewFile, onDownload }) => {
  return (
    <div className="bg-white rounded-lg shadow-material-1 overflow-hidden">
      {/* 表头 */}
      <div className="bg-material-grey-50 border-b border-material-grey-200 px-4 py-3">
        <div className="flex items-center">
          <div className="w-8"></div>
          <div className="flex-1 grid grid-cols-12 gap-4 text-sm font-medium text-material-grey-700">
            <div className="col-span-6">名称</div>
            <div className="col-span-2">大小</div>
            <div className="col-span-2">修改时间</div>
            <div className="col-span-2">操作</div>
          </div>
        </div>
      </div>

      {/* 文件列表 */}
      <div className="divide-y divide-material-grey-200">
        {files.map((file) => (
          <div
            key={file.id}
            className={`file-list-item ${
              selectedFiles.includes(file.id) ? 'bg-primary/5' : ''
            }`}
            onClick={() => onFileSelect(file.id)}
            onDoubleClick={() => file.type === 'folder' && onFolderOpen(file.name)}
          >
            <div className="w-8 flex-shrink-0">
              <input
                type="checkbox"
                checked={selectedFiles.includes(file.id)}
                onChange={(e) => {
                  e.stopPropagation();
                  onFileSelect(file.id);
                }}
                className="w-4 h-4 text-primary border-material-grey-300 rounded focus:ring-primary/50"
              />
            </div>

            <div className="flex-1 grid grid-cols-12 gap-4 items-center">
              <div className="col-span-6 flex items-center space-x-3">
                <FileIcon type={file.type} size="small" />
                <div>
                  <p className="text-sm font-medium text-material-grey-800">
                    {file.name}
                  </p>
                  {file.type === 'folder' && (
                    <p className="text-xs text-material-grey-500">
                      {file.items} 个项目
                    </p>
                  )}
                </div>
              </div>

              <div className="col-span-2">
                <span className="text-sm text-material-grey-600">
                  {file.type === 'folder' ? '-' : file.size}
                </span>
              </div>

              <div className="col-span-2">
                <span className="text-sm text-material-grey-600">{file.modified}</span>
              </div>

              <div className="col-span-2 flex justify-end space-x-2">
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    onPreviewFile && onPreviewFile(file);
                  }}
                  title="预览文件"
                >
                  <Eye className="w-4 h-4" />
                </Button>
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    // 添加星标逻辑
                  }}
                  title="添加星标"
                >
                  <Star className="w-4 h-4" />
                </Button>
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    // 分享逻辑
                  }}
                  title="分享文件"
                >
                  <Share2 className="w-4 h-4" />
                </Button>
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    onDownload && onDownload(file, e);
                  }}
                  title="下载文件"
                >
                  <Download className="w-4 h-4" />
                </Button>
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    // 更多操作逻辑
                  }}
                  title="更多操作"
                >
                  <MoreVertical className="w-4 h-4" />
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default FileList;
